<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>员工管理系统</h1>
    <div v-if="!isLogin">
        <!--javascript:void(0) 让超级链接失去跳转功能,但是界面上仍显示为超链接样式-->
        <a href="javascript:void(0)">注册</a>
        <a href="javascript:void(0)" @click="login()">登录</a>
    </div>
    <div v-else>
        <input type="text" v-model="newName">
        <input type="button" value="添加员工" @click="add()">
        <a href="javascript:void(0)" @click="logout()">退出登录</a>
    </div>
    <table border="1">
        <caption>员工列表</caption>
        <tr>
            <th>编号</th><th>姓名</th><th v-if="isLogin">操作</th>
        </tr>
        <!--i为for循环的索引项,从0开始到循环的元素长度-1-->
        <!--for循环一共有两个参数 (循环变量,i索引项)-->
        <tr v-for="(name,i) in arr">
            <td>{{i+1}}</td>
            <td>{{name}}</td>
            <td v-if="isLogin"><input type="button" value="删除" @click="del(i)"></td>
        </tr>
    </table>
</div>
 <script src="vueScript/vue.min.js"></script>
 <script>
     let v=new Vue({
         el:"body>div",
         data:{
             info:"hello Vue!!!!!",
             isLogin: false,
             arr:["刘备","张飞","关羽"],
             newName:""
         },
         methods:{
            login(){v.isLogin=true;},
             logout(){v.isLogin=false;},
             /*向arr数组中添加一个元素*/
             add(){v.arr.push(v.newName);},
             /*删除数组中索引i开始的项,删除数量为1项*/
             del(i){v.arr.splice(i,1)}
         }
     })
 </script>
</body>
</html>